<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
    <link rel="stylesheet" href="keyframes.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大二AE结课作业 《过 年》（已摆烂）</title>
</head>
<body>
    <video autoplay src="bgm.mp3" hidden></video>
    <div id="frame">
        <div class="line"></div>
        <div class="box">
            <img id="fu1" class="imgdef" src="fu.svg">
            <img id="fu2" class="imgdef" src="fu.svg">
            <img id="fu3" class="imgdef" src="fu.svg">
            <img id="fu4" class="imgdef" src="fu.svg">
            <img id="fu5" class="imgdef" src="fu.svg">
            <div id="fire1" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <div id="fire2" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <div id="fire3" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <img id="light1" class="light" src="light.svg">
            <div id="fire4" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <div id="fire5" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <div id="fire6" class="fire">
                <img src="firecrackers.svg">
                <div class="cover"></div>
                <img src="fire.svg">
            </div>
            <div class="gnl">过年啦<br>过年啦</div>
            <div class="endfont">
                <label>欢</label>
                <label>欢</label>
                <label>喜</label>
                <label>喜</label>
                <br>
                <label>过</label>
                <label>大</label>
                <label>年</label>
            </div>
        </div>
    </div>
</body>
<style>
    body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #frame{
        width: 1920px;
        height: 1080px;
        transform-origin: 0 0;
        transform: scale(0.5);
        border: 2px solid gray;
        position: relative;
        overflow:hidden
    }
    .box{
        width: 100%;
        height: calc(100% - 5px);
    }
    .line{
        width: 100%;
        height: 5px;
        background-color: #000;
        transform:rotate(-0.07deg);
    }
    .imgdef{
        width: 500px;
        position: absolute;
    }
    #fu1{
        left: 688px;
        top: 240px;
        opacity: 0;
        animation:showfu 500ms 300ms,
            hiddenfu 500ms 3000ms,
            showfu 50ms 3200ms,bigger1 10ms 3200ms,
            hiddenfu 50ms 3500ms,
            showfu 50ms 4100ms,
            fu1_4300 0ms 4200ms,
            fu1_4500 0ms 4300ms,
            fu1_4700 3.5s linear 4300ms,
            hiddenfu 50ms 7700ms,
            fuA1 16s linear 29s;
        animation-fill-mode:forwards;
    }
    #fu2{
        left: 167px;
        top: 240px;
        opacity: 0;
        animation:showfu 50ms 2300ms,
            hiddenfu 50ms 3100ms,
            showfu 50ms 3800ms,bigger1 10ms 3800ms,fu2_3800 10ms 3800ms,
            hiddenfu 50ms 4000ms,
            fu2_7700 3s linear 7700ms,showfu 50ms 7700ms,
            hiddenfu 50ms 9500ms,
            showfu 0s 29s,
            fuA4 16s linear 29s,
            hiddenfu 0s 45s;
        animation-fill-mode:forwards;
    }
    #fu3{
        left: 1215px;
        top: 240px;
        opacity: 0;
        animation:showfu 50ms 1300ms,
            hiddenfu 50ms 3100ms,
            showfu 50ms 3800ms,bigger1 10ms 3800ms,fu3_3800 10ms 3800ms,
            hiddenfu 50ms 4000ms,
            fu3_7700 3s linear 7700ms,showfu 50ms 7700ms,
            hiddenfu 50ms 9500ms,
            showfu 0s 29s,
            fuA3 16s linear 29s,
            hiddenfu 0s 45s;
        animation-fill-mode:forwards;
    }
    #fu4{
        left: 754px;
        top: 307px;
        opacity: 0;
        animation:showfu 50ms 3000ms,
            hiddenfu 50ms 3200ms,
            showfu 0s 29s,
            fuA2 16s linear 29s,
            hiddenfu 0s 45s;
        animation-fill-mode:forwards;
    }
    #fu5{
        left: 688px;
        top: 240px;
        opacity: 0;
        animation: showfu 0s 42s,
            fuA5 16s linear 42s,
            fuA5_2 1s linear 63s,
            hiddenfu 0s 64s;
        animation-fill-mode:forwards;
    }
    .fire{
        opacity: 0;
        width: 300px;
        position: absolute;
    }
    .fire img{
        position: absolute;
    }
    .cover{
        width: 100%;
        height: 0px;
        position: absolute;
        background-color: white;
        top: 635px;
    }
    .light{
        position:absolute;
    }
    #light1{
        width: 800px;
        top: 100px;
        left: -100px;
        opacity: 0;
        animation: showfu 0ms 10800ms,
            li1_10800 1800ms linear 10800ms,
            li1_11300 1400ms linear 12600ms,
            li1_14000 2000ms linear 14000ms,
            li1_16000 1500ms linear 16000ms,
            li1_17500 1000ms linear 17500ms,
            li1_19000 1000ms linear 18500ms,
            li1_19000 1500ms linear 19500ms,
            li1_21000 1500ms linear 21000ms;
        animation-fill-mode:forwards;
    }
    #fire1{
        left: 445px;
        top: 187px;
        animation: showfu 50ms 9300ms,
            hiddenfu 50ms 10000ms,
            showfu 0ms 22500ms,
            fireA1 0ms 22500ms,
            fireA7 0ms 23700ms,
            fireA13 0ms 24900ms,
            fireA19 0ms 26100ms,
            hiddenfu 0ms 27000ms;
        animation-fill-mode:forwards;
    }
    #fire2{
        left: 1085px;
        top: 157px;
        animation: showfu 50ms 9800ms,
            hiddenfu 50ms 10500ms,
            showfu 0ms 22700ms,
            fireA2 0ms 22700ms,
            fireA8 0ms 23900ms,
            fireA14 0ms 25100ms,
            fireA20 0ms 26300ms,
            hiddenfu 0ms 27200ms;
        animation-fill-mode:forwards;
    }
    #fire3{
        left: 786px;
        top: 253px;
        animation: showfu 50ms 10300ms,
            hiddenfu 50ms 11000ms,
            showfu 0ms 22900ms,
            fireA3 0ms 22900ms,
            fireA9 0ms 24100ms,
            fireA15 0ms 25300ms,
            fireA21 0ms 26500ms,
            hiddenfu 0ms 27400ms;
        animation-fill-mode:forwards;
    }
    #fire4{
        animation: showfu 0ms 23100ms,
            fireA4 0ms 23100ms,
            fireA10 0ms 24300ms,
            fireA16 0ms 25500ms,
            fireA22 0ms 26700ms,
            hiddenfu 0ms 27600ms;
        animation-fill-mode:forwards;
    }
    #fire5{
        animation: showfu 0ms 23300ms,
            fireA5 0ms 23300ms,
            fireA11 0ms 24500ms,
            fireA17 0ms 25700ms,
            fireA23 0ms 26900ms,
            hiddenfu 0ms 27800ms;
        animation-fill-mode:forwards;
    }
    #fire6{
        animation: showfu 0ms 23500ms,
            fireA6 0ms 23500ms,
            fireA12 0ms 24700ms,
            fireA18 0ms 25900ms,
            fireA24 0ms 27100ms,
            hiddenfu 0ms 28000ms;
        animation-fill-mode:forwards;
    }
    #fire1 .cover{
        animation: coverfire 400ms linear 9400ms,
            coverfire 800ms linear 22500ms,
            coverfire 800ms linear 23700ms,
            coverfire 800ms linear 24900ms,
            coverfire 800ms linear 26100ms;
        animation-fill-mode:forwards;
    }
    #fire2 .cover{
        animation: coverfire 400ms linear 9900ms,
            coverfire 800ms linear 22700ms,
            coverfire 800ms linear 23900ms,
            coverfire 800ms linear 25100ms,
            coverfire 800ms linear 26300ms;
        animation-fill-mode:forwards;
    }
    #fire3 .cover{
        animation: coverfire 400ms linear 10400ms,
            coverfire 800ms linear 22900ms,
            coverfire 800ms linear 24100ms,
            coverfire 800ms linear 25300ms,
            coverfire 800ms linear 26500ms;
        animation-fill-mode:forwards;
    }
    #fire4 .cover{
        animation: coverfire 800ms linear 23100ms,
            coverfire 800ms linear 24300ms,
            coverfire 800ms linear 25500ms,
            coverfire 800ms linear 26700ms;
        animation-fill-mode:forwards;
    }
    #fire5 .cover{
        animation: coverfire 800ms linear 23300ms,
            coverfire 800ms linear 24500ms,
            coverfire 800ms linear 25700ms,
            coverfire 800ms linear 26900ms;
        animation-fill-mode:forwards;
    }
    #fire6 .cover{
        animation: coverfire 800ms linear 23500ms,
            coverfire 800ms linear 24700ms,
            coverfire 800ms linear 25900ms,
            coverfire 800ms linear 27100ms;
        animation-fill-mode:forwards;
    }
    .gnl{
        font-size: 80px;
        font-family: "黑体";
        color: red;
        position:absolute;
        width: 300px;
        left: 2000px;
        top: 10px;
        line-height: 100px;
        animation: gnl 16s linear 33s;
        animation-fill-mode:forwards;
    }
    .endfont{
        font-size: 200px;
        font-family: "华文行楷";
        text-align: center;
        position:absolute;
        left: 474px;
        top: 300px; 
        color: yellow;
        opacity: 0;
        animation: showfu 0s 46s;
        animation-fill-mode:forwards;
    }
    .endfont label{
        display: inline-block;
    }
    .endfont label:nth-child(1){
        animation: endfont 4s linear 44s;
    }
    .endfont label:nth-child(2){
        animation: endfont 4s linear 47s;
    }
    .endfont label:nth-child(3){
        animation: endfont 4s linear 50s;
    }
    .endfont label:nth-child(4){
        animation: endfont 4s linear 52s;
    }
    .endfont label:nth-child(6){
        animation: endfont 4s linear 55s;
    }
    .endfont label:nth-child(7){
        animation: endfont 4s linear 57s;
    }
    .endfont label:nth-child(8){
        animation: endfont 4s linear 60s;
    }
</style>
</html>